// 引入Three.js库的全部功能，并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个透视相机，参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);

// 加载材质
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('../../images/house.jpg');
texture.mapping = THREE.EquirectangularReflectionMapping;

// 设置场景的背景为环境贴图
scene.background = texture;

//------------- 下面放创建几何体并创建材质的代码 -----------------------
const geometry = new THREE.SphereGeometry(15, 15, 15);

// 创建材质
const material = new THREE.MeshBasicMaterial({
    envMap: texture
});

const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

//--------------- 创建几何体代码结束 --------------------------

// 创建一个平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(1, 0, 0).normalize(); // 设置光源的方向
scene.add(directionalLight);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 40;

// 创建一个动画函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);
    // 更新 OrbitControls
    controls.update();


    // 渲染场景
    renderer.render(scene, camera);
}

animate()

